<template>
  <div>
    <div style="font-size:18px;"><strong>2018供应商资源库增长率</strong></div>
    <div :style="{ height:`${height}px` }" :id="id"></div>
  </div>
</template>

<script>
import G2 from '@antv/G2'

export default {
  props: {
    charData: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    id: String
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawChart(this.charData)
  },
  watch: {
    charData (val, oldVal) {
      this.drawChart(val)
    }
  },
  methods: {
    drawChart (datas) {
      this.chart && this.chart.destroy()
      this.chart = new G2.Chart({
        height: this.height,
        container: this.id, // 指定容器
        forceFit: true
      })
      this.chart.source(datas)
      this.chart.scale('value', {
        min: 2
      })
      this.chart.scale('year', {
        range: [0, 1]
      })
      this.chart.line().position('year*value')
      this.chart.point().position('year*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 2
      })
      this.chart.render()
    }
  }
}
</script>
